<template>
  <view class="container">
    <!-- 头部 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back">
        <image src="../../static/go-back.svg" @click="goBack"/>
        <view>系统通知</view>
        <image class="img-hide" src="../../static/brands-search.svg"/>
      </view>
    </view> -->

    <navigationBar title="系统通知"/>

    <view class="content">
      <view class="item" v-for="item in dataList.noticeList" :key="item.id">
        <view class="item-time">{{functions.timeText2(item.createdTime.replace('T',' '))}}</view>
        <view class="item-con">
          <view>{{item.name}}</view>
          <view>{{item.content}}</view>
          <view @click="toDetail(item)">
            <text>查看详情</text>
            <image src="../../static/right.svg"/>
          </view>
        </view>
      </view>
    </view>

    <!-- 已经到底了 -->
    <view class="is-end" v-if="isEnd">没有更多了</view>

    <view class="safe-padding"></view>

  </view>
  
  </template>

  <script setup>
    import { ref, watch, reactive, onMounted, nextTick } from 'vue';  
    import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";	
    import { noticePage } from '@/api/user.js'
    import functions from '@/utils/functions.js'

    //是否加载结束
    const isEnd = ref(false)

    //分页数据
    const pageData = reactive({
      pageSize:10,
      page:1
    })

    const dataList = reactive({
      noticeList:[]
    })


    onMounted(() => {
      getNoticePage()
    })

    onReachBottom(() => {
      if(isEnd.value) return;
      pageData.page++
      getNoticePage()
    })

    const goBack = () => {
      uni.navigateBack({ delta: 1 })
    }

    //获取评论和@列表
    const getNoticePage = async () => {
      let res = await noticePage({ ...pageData,userGgroup:1 })
      if (res.list.length < pageData.pageSize) isEnd.value = true
      console.log('通知公告',res)
      dataList.noticeList = dataList.noticeList.concat(res.list)
    }

    const toDetail = (item) => {
      uni.navigateTo({
        url: `/pages/notificationDetail/index?id=${item.id}&title=${item.name}&content=${item.content}`
      });
    }


  </script>

  <style lang="scss" scoped>
    .container{
      width: 100vw;
      height: 100vh;
      background-color: #F4F3F7;
      position: fixed;
      top: 0;
      left: 0;
      /* padding: 0;
      margin: 0; */
      overflow-y: scroll;

      .fixed-con{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        .go-back{
          width: 750rpx;
          height: 90rpx;
          padding:0 30rpx;
          box-sizing: border-box;
          background-color: white;
          border-bottom: 2rpx solid #F1F1F1;
          @include flex(row,space-between,center);
          image{
            width: 40rpx;
            height: 40rpx;
          }
          view{
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
          }
          .img-hide{
            opacity: 0;
          }
        }
      }

      .content{
        margin-top: calc(var(--status-bar-height) + 90rpx);
        
        .item{
          .item-time{
            width: 750rpx;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #A9A7B3;
            margin-bottom: 20rpx;
            padding-top: 40rpx;
          }

          .item-con{
            width: 690rpx;
            /* height: 222rpx; */
            background: #FFFFFF;
            border-radius: 4rpx;
            margin:0 auto 40rpx auto;
            padding: 30rpx 24rpx 0 24rpx;
            box-sizing: border-box;

            >view:nth-of-type(1){
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 20rpx;
            }
            >view:nth-of-type(2){
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #72707B;
              @include text-overflow-many(2);
            }
            >view:nth-of-type(3){
              width: 100%;
              height: 62rpx;
              margin-top: 16rpx;
              border-top: 2rpx solid #F1F1F1;
              @include flex(row,space-between);

              >text{
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #A9A7B3;
              }
              >image{
                width: 24rpx;
                height: 24rpx;
              }
            }
          }
        }
      } 

      .is-end{
        text-align: center;
        margin: 20rpx;
        color: #8a8a8a;
      }

    }
  </style>